var ReactUITable=React.createClass({
	render:function(){
	    if(this.props.data!=undefined&&!$.isEmptyObject(this.props.data)){
	    	var loadTableData=this.props.data.map(function(grid){
				return (<tr><td>grid.loggerid</td><td>grid.accessClass</td><td>grid.accessUser</td><td>grid.createTime</td><td>grid.loggerContent</td><td>grid.tag</td></tr>);
			});
	    }
	    return(
				<table className="table table-striped">
				<thead>
				<tr>
				<th>访问类名称</th>
				<th>访问用户</th>
				<th>创建时间</th>
				<th>日志内容</th>
				<th>标签</th>
				</tr>
				</thead>
				<tbody>
			      {loadTableData}
			     </tbody>
				</table>
				);
	}
});
var ReactUIPage=React.createClass({
	handleClick:function(e){
		console.log("hello"+this.props.index);
	},
	render:function(){
		var prevPage= this.props.prevPage==true?<li className="disabled"> <a href="javascript:;" >
        <span aria-hidden="true">&laquo;</span>
	      </a>
	    </li>:<li><a href="javascript:;">
      <span aria-hidden="true">&laquo;</span>
	      </a>
	    </li>;
		
		var page=[];
		for(var i=0;i<10;i++){
			page.push(<li onClick={this.handleClick} index={i}><a href="javascript:;">{i}</a></li>);
		}
		var nextPage=this.props.nextPage==true? <li className="disabled">
	      <a href="javascript:;" aria-label="Next">
	        <span aria-hidden="true">&raquo;</span>
	      </a>
	    </li>: <li>
	      <a href="javascript:;" aria-label="Next">
	        <span aria-hidden="true">&raquo;</span>
	      </a>
	    </li>;
		return (
				<nav className="text-center">
				  <ul className="pagination">
                    {prevPage}
				    {page}
				    {nextPage}
				  </ul>
				</nav>
				);
	}

});
var ReactUIDataGrid=React.createClass({
	loadDataFromServer:function(){
		var params=new Object();
		params.indexPage=this.props.indexPage;
		$.ajax({
			url:this.props.url,
			type:"post",
			dataType:"json",
			cache:false,
			data:params,
			success:function(data){
				this.setState(data);
			}.bind(this),
			error:function(xhr,status,err){
				console.error(this.props.url,status,err.toString());
			}.bind(this)
		});
	},// 远程加载数据
	getInitialState:function(){
		return {content:[],last:false,totalPages:0,first:false};
	},// 返回存储的数据结构
	componentDidMount:function(){
		this.loadDataFromServer();
	},// 第一次加载数据
	render:function(){
		return (<div className="row">
		  <div className="col-sm-12">
	      <ReactUITable data={this.state.content}></ReactUITable>
	      <ReactUIPage prevPage={this.state.first} nextPage={this.state.next} totalPage={this.state.totalPages}></ReactUIPage>
	      </div>
	</div>)
		
	}
});
ReactDOM.render(<ReactUIDataGrid url="./getReactData.action" indexPage="1"/>,document.getElementById("datagrid"));